<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/gou.css"/>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../css/new_file.css"/>
		<style>
			.pagination{
                display: flex;
                width: 300px;
                text-align: center;
                background-color: rgb(252, 238, 238);
                border-radius: 25px;
                overflow: hidden;
                margin: 0 auto;
            }
            .pagination a{
                width: 30px;
                line-height: 30px;
                color: #404040;
                flex:1;
            }
            .pagination a:nth-child(1) {
                transform: rotate(-45deg) ;
            }
            .pagination .next {
                transform: rotate(45deg) ;
            }
            .pagination a:hover{
                color: rgb(247, 73, 73);
            }
		</style>
		<script src="../js/ajax.js"></script>
	</head>
	<body>
		<div class="gou_bar">
			<div class="inner">
				<a href="index.php"><img src="../img/logo.png"/></a>
				<div class="info" style="float: right;">
					<a class="toCar">我的购物车</a>
					<!-- <a href="">(个人信息)</a> -->
					
				</div>
				
				<!-- <ul class="bar_ul">
					<li>我的购物车</li>
					<li>确认订单信息</li>
					<li>等待付款</li>
					<li>订单执行</li>
				</ul> -->
			</div>
			
		</div>
		
		<div class="shopping">
			<h4>保税区</h4>
			
			<table id="cartTable">
    <thead>
        <tr>
            <th><label><input class="check-all check" type="checkbox"/>&nbsp;全选</label></th>
            <th>商品信息</th>
            <th>商品单价</th>
            <th>数量</th>
            <th>小计</th>
            <!-- <th>操作</th> -->
        </tr>
    </thead>
    <tbody>
        <!-- <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="../img/images/20150708112148lm2t0.jpg" alt=""/><span>飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）</span></td>
            <td class="price">220.88</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">220.88</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="../img/images/201509091748430829.jpg" alt=""/><span>日本Merries花王新生儿纸尿裤S82</span></td>
            <td class="price">388.50</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">388.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="../img/images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
            <td class="price">148.50</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">148.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="../img/images/201608081427026196.jpg" alt=""/><span>韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装 多款颜色图案随机发货 </span></td>
            <td class="price">640.60</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">640.60</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr> -->
    </tbody>
</table>
<div class="pagination">
	<!-- <a href="javascript:;" class="prev">⌜</a>
	<a href="javascript:;">1</a>
	<a href="javascript:;">2</a>
	<a href="javascript:;">3</a>
	<a href="javascript:;">4</a>
	<a href="javascript:;">5</a>
	<a href="javascript:;" class="next">⌝</a> -->
</div>
<div class="foot" id="foot">
    <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;全选</label>
    <!-- <a class="fl delete" id="deleteAll" href="javascript:;">删除</a> -->
    
    <div class="fr closing">立即购买</div>
    <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
    <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
    <div class="selected-view">
        <div id="selectedViewList" class="clearfix">
        </div>
        <span class="arrow">◆<span>◆</span></span>
    </div>
</div>
		</div>
		
		
		<div class="last">
			<h5 class="last_h5">
				<img src="../img/trduty_bg.jpg"/>
				个人邮递进口物品清关税收解读
			</h5>
			<div class="last_bot">
				<ul>
					<li class="last_li0">个人邮递进境物品须界定为<a class="last_bot_sp1" href="">个人自用</a></li>
					<li><span class="last_li1">免征税</span>奶粉线征收跨境税，<span class="last_bot_sp2">取消50元以下免征额。美国线、快速线征收行邮税，50元以下免征额仍保留；</span></li>
					<li><span class="last_li2">非个人清关</span>奶粉线单次交易限值为人民币2000元（不分单件多件），个人年度交易限值为人民币20000元；美国线、快速线单个包裹限值≤1000（单件不可分割物品除外）；美国线单件不可物品限值≤5000；</li>
					<li><span class="last_li3">被税</span>自理关税；如果您的货物在海关被税，海关或海淘橙官方将通知您支付税费；我们不会预收关税，请您只需选择海淘橙官方支付方式进行税务的缴纳。</li>
				</ul>
			</div>
		</div>
		
		
			<div class="BOTTOM">
	 <div class="BB">
	 	 <img src="../img/bot_slogan.png" alt="" />
	 </div>
</div>
<!--死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        -->
<div class="BigBottom">
<div class="Big">
	    <div class="Big1">
	           <p><a style="color: white;" href="#">海淘橙</a></p>
	           <p class="Big1a"><a href="#">关于我们</a></p>
	           <p class="Big1a"><a href="#">免责声明</a></p>
	           <p class="Big1a"><a href="#">联系我们</a></p>
	    </div>
	   <div class="Big2">
	           <p><a style="color: white;" href="#">海淘橙</a></p>
	           <p class="Big1a"><a href="#">意见/建议</a></p>
	           <p class="Big1a"><a href="#">海淘购物</a></p>
	           <p class="Big1a"><a href="#">友情链接</a></p>
	    </div>
	    <div class="Big3">
	           <p><a style="color: white;" href="#">帮助中心</a></p>
	           <p class="Big1a"><a href="#">新手指南</a></p>
	           <p class="Big1a"><a href="#">常见问题</a></p>
	           <p class="Big1a"><a href="#">正品保证</a></p>
	           <p class="Big1a"><a href="#">物流配送</a></p>
	    </div>
	    <div class="Big4">
	           <p><a style="color: white;" href="#">资讯频道</a></p>
	           <p class="Big1a"><a href="#">海淘咨询</a></p>
	           <p class="Big1a"><a href="#">网站公告</a></p>
	           <p class="Big1a"><a href="#">网站地图</a></p>
	    </div>
	    <div class="Big5"></div><div class="Big6"></div>
	    <div class="Big7">
	    	     <span class="Big7a">微信订阅号</span>
	    	     <span class="Big7b">扫一扫有惊喜</span>
	    	     <img src="../img/emw1.png" alt="" />
	    </div>
	    <div class="Big7">
	    	     <span class="Big7a">微信订阅号</span>
	    	     <span class="Big7b">扫一扫有惊喜</span>
	    	     <img src="../img/emw1.png" alt="" />
	    </div>
	    <div class="Big8"></div><div class="Big9"></div>
	    <div class="Big10">
	    	        <p class="Big10a">关注我们</p>
	    	        <img src="../img/xlkjk.png" alt="" />
	    	        <p class="Big10c">邮件订阅</p>
	    	        <input class="Big10d" type="text" placeholder="请输入您的邮箱地址，订阅最新优惠" />
	    	        <div class="Big10e">订阅</div>
	    </div>
	    <div class="Big11"></div><div class="Big12"></div>
	    <div class="Big13">Copyright 2012-2016 海淘橙 haitaocheng.com. All Rights Reserved.粤ICP备14073754号-1</div>
</div>	    
</div>
		
		<!--右侧购物栏-->
		<div class="right_l">
			<div class="regist_wrap">
				<div class="regist"></div>
			</div>
			<div class="regist_wrap2">
				<div class="regist2"></div>
				<p>一键购</p>
			</div>
			<div class="regist_wrap3">
				<div class="regist3"></div>
				<p>购物车</p>
			</div>
			<div class="regist_wrap4">
				<div class="regist4"></div>
			</div>
			<div class="regist_wrap5">
				<div class="regist5"></div>
			</div>
			<div class="regist_wrap6">
				<div class="regist6"></div>
			</div>
			<div class="regist_wrap7">
				<div class="regist7"></div>
			</div>
			
			<div class="regist_wrap8">
				<div class="regist8"></div>
			</div>
		</div>
		<script>
			let page = 1 ;
			getList();
			function getList(){
				ajax({
					url:'./admin/allProduct.php',
					dataType:'json',
					method:'post',
					data:{
						page
					},
					success(data){
						let arr = [] ;
						let arr1 = (window.location.search).substr(1,).split("=");
						data.forEach(item=>{
							let obj = {id:1,uid:arr1[1],pname:'',price:1,type:1,srcImg:'',num:1,ischecked:false};
							obj = {...obj,...item};
							arr.push(obj);
						});
						renderDom(arr);
						getBuy(arr);
					}
				});
			}
			
			// 根据数据渲染 视图；

			function renderDom(arr) {
				var tbody = document.querySelector("tbody");
				//总价
				var priceTotal = document.getElementById("priceTotal");
				//选择的总量
				var selectedTotal = document.getElementById("selectedTotal");
				tbody.innerHTML = "";
				var totalPrice = 0 ; 
				var totalNum = 0 ;
				arr.forEach(function (item,key) {
					var trEle = document.createElement("tr");
					if (item.ischecked) {
						var isCheckStr = `<input class="check-one check" checked  type="checkbox" />`;
						totalPrice = totalPrice + ( item.price * 100 * item.num / 100 );
						totalNum = totalNum + parseInt( item.num ) ;
					} else {
						var isCheckStr = `<input class="check-one check"   type="checkbox" />`;
					}
					if ( item.num > 1 ){
						var reduceStr = `<span class="reduce">-</span>`
					}
					if ( item.num == 1 ){
						var reduceStr = `<span class="reduce"></span>`
					}
					trEle.innerHTML = `<td class="checkbox">
							${isCheckStr}
						</td>
						<td class="goods"><img src="./admin/uploads/${item['srcImg']}"
								alt="" /><span>${item['pname']}</span></td>
						<td class="price">${item['price']}</td>
						<td class="count">${reduceStr}<input class="count-input" type="text"
								value="${item.num}" /><span class="add">+</span></td>
						<td class="subtotal">${ item.price * 100 * item.num / 100}</td>
						`;
					tbody.appendChild(trEle);
				})
				priceTotal.innerHTML = `${totalPrice.toFixed(2)}`
				selectedTotal.innerHTML = `${totalNum}`
				// 从新添加点击事件；
				countChange(arr);
				countChecked(arr);
				
				getPage();
				
				// console.log(arr);
			}


			// 数量操作
			// 先操作数据，然后再渲染视图
			function countChange(arr) {
				var addEles = document.querySelectorAll(".add");
				var reduceEles = document.querySelectorAll(".reduce");
				var countEles = document.querySelectorAll(".count-input");
				addEles.forEach(function (item, key) {
					item.onclick = function () {
						arr[key].num += 1;
						// console.log(reduceEles[key]);
						renderDom(arr);
					}
				});
				reduceEles.forEach(function(reduceEle,key){
					reduceEle.onclick = function () {
						if ( arr[key].num > 1 ) {
							arr[key].num -= 1;
						}
						renderDom(arr);
					}
				});
			}

			function countChecked (arr) {
				//全选伪数组
				var checkAllEles = document.querySelectorAll(".check-all");
				//单选伪数组
				var checkOneEles = document.querySelectorAll(".check-one");
				checkOneEles.forEach(function(checkOneEle,key){
					checkOneEle.onclick = function () {
						arr[key].ischecked = checkOneEle.checked ;
						var res = arr.every(function( item ){
							return item.ischecked ;
						});
						checkAllEles.forEach(function(checkAllEle){
							checkAllEle.checked = res ;
						});
						renderDom(arr);
					}
				});
				checkAllEles.forEach(function(checkAllEle){
					checkAllEle.onclick = function (){
						var flag = checkAllEle.checked ;
						arr.forEach(function(item){
							item.ischecked = flag ; 
						});
						checkAllEles.forEach(function(checkAllEle){
							checkAllEle.checked = flag ; 
						});
						renderDom(arr);
					}
				});
			}

			getPage();
			function getPage(){
				ajax({
					url:"./admin/getPage.php",
					method:"post",
					dataType:"json",
					success(data){
						let page = data['totalPage'];
						pageRender(page);
					}
				});
			}
			function pageRender(num){
				let pagEle = document.querySelector(".pagination");
				pagEle.innerHTML = '' ;
				let str = '' ;
				for(let i = 1 ; i <= num ; i ++ ){
					str += `<a href="javascript:;">${i}</a>`
				}
				pagEle.innerHTML = `<a href="javascript:;" class="prev">⌜</a>
								${str}
								<a href="javascript:;" class="next">⌝</a>`;
				let aEles = pagEle.querySelectorAll("a");
				aEles.forEach(function(aEle,key){
					aEle.onclick = function (){
						if( aEle.className == "prev" ){
							if( page > 1 ){
								page = page - 1 ;
								getList();
							}
						} else 
						if( aEle.className == "next" ){
							if( page < num ){
								page = page + 1 ;
								getList();
							}
						} else {
							page = parseInt(aEle.innerHTML.trim()) ;
							getList();
						}
					}
					
				});
			}
			function getBuy(arr){
				let buyEle = document.querySelector(".closing");
				buyEle.onclick = function (){
					let res = arr.filter(item=>item['ischecked']);
					if( res.length > 0 ){
						let str1 = '',str2 = '' ; 
						res.forEach((iObj,key)=>{
							if( key != res.length - 1 ){
								str1 = str1 + iObj['id'] + "," ;
								str2 = str2 + iObj['num'] + "," ;
							} else {
								str1 += iObj['id'] ;
								str2 += iObj['num'] ;
							}
						});
						console.log(str1,str2);
						ajax({
							url:'../php/addGoods.php',
							method:'post',
							dataType:'json',
							data:{
								goodsId:str1,
								goodsNum:str2,
								uid:res[0]['uid'],
							},
							success(res){
								let a = res.every(itm=>itm['res']);
								if ( a ) {
									let arr1 = (window.location.search).substr(1,).split("=");
									window.location.href = `./users/userList.html?id=${arr1[1]}`;
								}
							}
						});
					} else {
						window.alert("请选择商品");
					}
				}	
			}
			let toCarEle = document.querySelector(".toCar");
			toCarEle.onclick = function (){
				let arr1 = (window.location.search).substr(1,).split("=");
				window.location.href = `./users/userList.html?id=${arr1[1]}`;
			}
		</script>
	</body>
</html>